<template>
    <div class="drop-down-search">
        <div class="author">
            <div>作者：黄彪</div>
            <div>日期：2017/11/02</div>
        </div>
        <org-select-search-tree
            v-model="selectedTreeId"
            @select-change="selectChange"
        ></org-select-search-tree>

        <br/>
        <org-select-search-tree v-for="(item, index) in treeList"
            :key="index"
            v-model="selectedTreeId1"
        ></org-select-search-tree>

        <h3>HTML代码</h3>
        <!-- 显示HTML代码 -->
        <pre>
            <code class="html" v-text="htmlCode">
            </code>
        </pre>

        <h3 style="margin-top:10px">JavaScript代码</h3>
        <!-- 显示JavaScript代码 -->
        <pre>
            <code class="javascript" v-text="jsCode">
            </code>
        </pre>

        <div class="api">
            <div class="anchor">
                <h2 id="API">API</h2>
            </div>
            <div class="anchor">
                <h3 id="Select_events"> events</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>属性名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>v-model</td>
                    <td>选中机构返回的节点对象</td>
                    <td>Object,节点的所有信息</td>
                </tr>
                </tbody>
            </table>

            <div class="anchor">
                <h3 id="Select_methods"> methods</h3>
            </div>
            <table>
                <thead>
                <tr>
                    <th>事件</th>
                    <th>说明</th>
                    <th>参数</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>select-change</td>
                    <td>选中节点触发的事件</td>
                    <td>Object,节点的所有信息</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import hljs from 'highlight.js'

    export default {
        mounted: function() {
            var that = this;
            window.setTimeout(function () {
                that.treeList.push("1")
                $('.drop-down-search  pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },
        data() {
            return {
                treeList:[],
                // 选中机构的ID
                selectedTreeId:'8aaabbe45f7b926c015f9574e483000e',
                selectedTreeId1:'',
                jsCode: '' +
                'export default {\n' +
                '\tdata() {\n' +
                '\t\treturn {\n' +
                '\t\t\t// 选中机构的ID\n' +
                '\t\t\tselectedTreeId:\'8aaabbe45f7b926c015f9574e483000e\',\n' +
                '\t\t\tselectedTreeId1:\'\',\n' +
                '\t\t}\n' +
                '\t},\n' +
                '\tmethods: {\n' +
                '\t\t//点击获取数据\n' +
                '\t\tselectChange:function(nodeInfo){\n' +
                '\t\t\tconsole.dir(nodeInfo);\n' +
                '\t\t},\n' +
                '\t},\n' +
                '}',
                htmlCode:'' +
                '<org-select-search-tree\n' +
                '            v-model="selectedTreeId"\n' +
                '            @select-change="selectChange"\n' +
                '></org-select-search-tree>',
            }
        },
        watch:{
            selectedTreeId: function(newValue){
                console.log(newValue);
            },
            selectedTreeId1: function(newValue){
                console.log(newValue);
            }
        },
        methods: {
            //点击获取数据
            selectChange:function(nodeInfo){
				console.dir(nodeInfo);
            },
        },

        components: {},
    }




</script>

<style lang="scss">
    .drop-down-search {
        .content {
            border: 1px black solid;
            width: 250px;
            height: 200px;
            left: 18px;
            top: 242px;
            z-index: 1035;
        }
        .searchInput{
            width:250px;

        }
        margin: 40px;

        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
        }

        .marginT20 {
            margin-top: 20px;
        }

        table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        table td, table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
    }
</style>
